<template>
  <div class="huiyuanjingji">
    <div class="samlldiv">
      <div class="hyjjdowmdiv1" style="">
        <div class="hyjjdowmdiv2" style="">
          <div class="hyjjdowmdiv3" style="">
            <div
              class="hyjjdowmdiv4"
              style="display: flex; align-items: center"
            >
              <p style="margin-left: 1%; margin-right: 10px">服务费统计TOP10</p>
              <div class="myselectimghyjj">
                <Select
                  v-model="fwftjtoptenselectvalue"
                  placeholder="请选择"
                  @visible-change="mouseClick"
                >
                  <i slot="prefix" class="el-input__icon" />
                  <el-option
                    v-for="item in fwftjtoptenoptions"
                    :key="item.orgcode"
                    :label="item.title"
                    :value="item.orgcode"
                  >
                  </el-option>
                </Select>
              </div>
              <div class="style13">
                <dataPicker
                  v-model="myzbjedatepicker"
                  type="month"
                  placeholder="累计"
                  value-format="yyyy-MM"
                  :editable="false"
                  prefix-icon="1"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="fuftjtopten">
          <Echart
            ref="echartz"
            id="hyjjecharts"
            :options="hyjjfwftjoptions"
            height="100%"
            width="100%"
          ></Echart>
        </div>
        <p class="fuftjtoptendw">单位:万元</p>
      </div>
      <div class="glxgysfwftj">
        <div class="glxgysfwftjtitle">
          <p>各类型供应商服务费统计</p>
          <div class="glxgysfwftjcontenttext">
            <div class="glxgysfwftjcontenttextsmalldiv">
              <div style="padding-left: 25%" class="radiogroupclass">
                <el-radio-group v-model="radiovalue">
                  <el-radio :label="1">本年</el-radio>
                  <div style="height: 1rem"></div>
                  <el-radio :label="2">累计</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div style="height: 100%">
              <Echart
                ref="echartab"
                id="hyjjleftglxgysfwftj"
                :options="hyjjglxgysfwftjoptions"
                height="100%"
                width="100%"
              ></Echart>
            </div>
          </div>
        </div>
        <div class="fwfyphtopten">
          <div style="display: flex">
            <p style="margin-right: 10px">服务费用排行TOP10</p>
            <div
              class="myselectimghyjj"
              v-if="hyjjfwfyphtoptenoptions.length > 0"
            >
              <Select
                v-model="hyjjfwfyphtoptenselectvalue"
                placeholder="请选择"
                @visible-change="mouseClick"
              >
                <i slot="prefix" class="el-input__icon" />
                <el-option
                  v-for="item in hyjjfwfyphtoptenoptions"
                  :key="item.object"
                  :label="item.title"
                  :value="item.object"
                >
                </el-option>
              </Select>
            </div>
            <div class="style13">
              <dataPicker
                v-model="hyjjfwfyphtoptendatepicker"
                type="month"
                placeholder="累计"
                value-format="yyyy-MM"
                :editable="false"
                prefix-icon="1"
              />
            </div>
          </div>

          <div class="fwfyphtoptencontent">
            <div class="fwfyphtoptencontenttable">
              <div
                style="
                  background-color: #182c56;
                  color: #fff;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  height: 17%;
                "
              >
                <div style="width: 15%; text-align: center">排名</div>
                <div
                  class="middletable"
                  style="background-color: #182c56; text-align: center"
                >
                  公司名
                </div>
                <div style="width: 25%; text-align: center">
                  服务费<span style="font-size: 0.7rem">(万元)</span>
                </div>
              </div>
              <div
                style="
                  height: 16%;
                  display: flex;
                  align-items: center;
                  border-bottom: 1px solid rgba(24, 44, 86, 0.3);
                "
                v-for="(item, index) in qianwupaihang"
                :key="index"
              >
                <div style="width: 15%; text-align: center">
                  {{ index + 1 }}
                </div>
                <div class="middletable" :title="item.suppliername">
                  <p
                    style="
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item.suppliername }}
                  </p>
                </div>
                <div style="width: 20%; text-align: center">
                  {{ returnFloat(item.payprice / 10000) }}
                  <!-- {{ (item.payprice / 10000).toFixed(2) }} -->
                </div>
              </div>
            </div>
            <div class="fwfyphtoptencontenttable">
              <div
                style="
                  background-color: #182c56;
                  color: #fff;
                  display: flex;
                  align-items: center;
                  height: 17%;
                  align-items: center;
                "
              >
                <div style="width: 15%; text-align: center">排名</div>
                <div
                  class="middletable"
                  style="background-color: #182c56; text-align: center"
                >
                  公司名
                </div>
                <div style="width: 25%; text-align: center">
                  服务费<span style="font-size: 0.7rem">(万元)</span>
                </div>
              </div>
              <div
                style="
                  height: 16%;
                  display: flex;
                  align-items: center;
                  border-bottom: 1px solid rgba(24, 44, 86, 0.3);
                "
                v-for="(item, index) in houwupaihang"
                :key="index"
              >
                <div style="width: 15%; text-align: center">
                  {{ index + 6 }}
                </div>
                <div style="" class="middletable" :title="item.suppliername">
                  <p
                    style="
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item.suppliername }}
                  </p>
                </div>
                <div style="width: 20%; text-align: center">
                  <!-- {{ (item.payprice / 10000).toFixed(2) }} -->
                  {{ returnFloat(item.payprice / 10000) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Echart from "@/common/echart";
import * as echarts from "echarts";
import { yearDate } from "@/utils/common";
import Hyjjtop from "@/components/hyjjtop.vue";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";

export default {
  name: "hyjjsecongpopup",
  components: {
    Echart,
    Hyjjtop,
    YYDatePick,
    dataPicker,
    Select,
  },
  props: {},
  data() {
    return {
      hyjjfwfyphtoptenoptions: [],
      hyjjfwfyphtoptenselectvalue: "2",
      fwftjtoptenselectvalue: "9",
      selectvalue: "全部",
      fwftjtoptenoptions: [],
      qianwupaihang: [],
      houwupaihang: [],
      myzbjedatepicker: "",
      hyjjfwfyphtoptendatepicker: "",
      hyjjglxgysfwftjoptions: {},
      radiovalue: 1,
      active: true,
      activenum: 0,
      ccrsboptions: {},
      hyjjList: "",
      radioV: "1",
      yearhyjjoption: {},
      severtabledata: [1, 1, 1, 1],
      hyjjvipndfyhzoptions: {},
      hyjjfwftjoptions: {},
      vipmesnumber: {
        todayReceived: 0,
        totalReceived: 0,
        vipTotal: 0,
        dueSoon: 0,
        yearVip: 0,
      },
      unitleiji: "",
      serveExpensearr: {},
      vipExpensearr: {},
      hyjjdatepickerndfyzh: yearDate(),
      pois: null,
    };
  },
  watch: {
    fwftjtoptenselectvalue(newVal, oldVal) {
      if (!newVal) {
        this.fwftjtoptenselectvalue = "9";
      }
      this.getfindByOrgCode();
    },
    myzbjedatepicker(newVal, oldVal) {
      this.getfindByOrgCode();
    },
    hyjjfwfyphtoptenselectvalue(newVal, oldVal) {
      this.getfindByObjCode();
    },
    hyjjfwfyphtoptendatepicker(newVal, oldVal) {
      this.getfindByObjCode();
    },
    radiovalue(newVal, oldVal) {
      if (newVal == "1") {
        this.gethyjjleftglxgysfwftj(1, 2);
      } else {
        this.gethyjjleftglxgysfwftj("", 2);
      }
    },
  },
  mounted() {
    console.log(1111111);
    this.hyjjfwfyphtoptenoptions = this.$store.state.projectlistarr1 || [];
    this.renderselect();
    this.getfindByOrgCode();
    this.gethyjjleftglxgysfwftj(1);
    this.getfindByObjCode();
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      return num;
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    getfindByObjCode() {
      let data = {};
      if (this.hyjjfwfyphtoptenselectvalue) {
        data["objCode"] = this.hyjjfwfyphtoptenselectvalue;
      }
      if (this.hyjjfwfyphtoptendatepicker) {
        data["year"] = this.hyjjfwfyphtoptendatepicker;
      }
      APIS.Hyjj.findByObjCode(data)
        .then((res) => {
          this.qianwupaihang = res.data.splice(0, 5);
          this.houwupaihang = res.data.splice(0, 5);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    hyjjdatepickerchange() {
      this.getyearExpenseCollect(2);
    },
    getyearExpenseCollect(num) {
      let xValue = [];
      let yValue1 = [];
      let yValue2 = [];
      let yValue3 = [];
      APIS.Hyjj.yearExpenseCollect({ year: this.hyjjdatepickerndfyzh })
        .then((res) => {
          for (const key in res.data.serviceExpense) {
            xValue.push("M" + key);
          }
          for (const key6 in res.data) {
            if (key6 == "serviceExpense") {
              for (const key1 in res.data.serviceExpense) {
                yValue3.push(
                  this.returnFloat(res.data.serviceExpense[key1] / 10000)
                );
                // (res.data.serviceExpense[key1] / 10000).toFixed(2)
              }
            } else if (key6 == "totalExpense") {
              for (const key2 in res.data.totalExpense) {
                yValue1.push(
                  this.returnFloat(res.data.totalExpense[key2] / 10000)
                );
                // yValue1.push((res.data.totalExpense[key2] / 10000).toFixed(2));
              }
            } else if (key6 == "vipExpense") {
              for (const key3 in res.data.vipExpense) {
                // yValue2.push((res.data.vipExpense[key3] / 10000).toFixed(2));
                yValue2.push(
                  this.returnFloat(res.data.vipExpense[key3] / 10000)
                );
              }
            }
          }

          if (num == 2) {
            //重新渲染
            let myChart = echarts.init(
              document.getElementById("vipareabottomecharts")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue1,
                },
                {
                  data: yValue2,
                },
                {
                  data: yValue3,
                },
              ],
            });
          } else {
            this.renderhyjjvipndfyhzoptions(xValue, yValue1, yValue2, yValue3);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getserveExpense() {
      APIS.Hyjj.serveExpense()
        .then((res) => {
          this.serveExpensearr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getvipExpense() {
      APIS.Hyjj.vipExpense()
        .then((res) => {
          this.vipExpensearr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getnumbervip() {
      APIS.Hyjj.todayReceivedAmount()
        .then((res) => {
          console.log(res);
          // this.vipmesnumber.todayReceived = (res.data / 10000).toFixed(2);
          this.vipmesnumber.todayReceived = this.returnFloat(res.data / 10000);
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.totalReceivedAmount()
        .then((res) => {
          console.log(res);
          if (res.data > 99999) {
            // this.vipmesnumber.totalReceived = (res.data / 100000000).toFixed(2);
            this.vipmesnumber.totalReceived = this.returnFloat(
              res.data / 100000000
            );
            this.unitleiji = "亿元";
          } else {
            // this.vipmesnumber.totalReceived = (res.data / 10000).toFixed(2);
            this.vipmesnumber.totalReceived = this.returnFloat(
              res.data / 10000
            );
            this.unitleiji = "万元";
          }
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.vipTotalNum()
        .then((res) => {
          console.log(res);
          this.vipmesnumber.vipTotal = res.data;
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.dueSoonNum()
        .then((res) => {
          console.log(res);
          this.vipmesnumber.dueSoon = res.data;
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.yearVipNum()
        .then((res) => {
          console.log(res);
          this.vipmesnumber.yearVip = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gethyjjleftglxgysfwftj(num, rendernum) {
      let data = {};
      let max = 0;
      let arr = [];
      if (num == 1) {
        data["year"] = yearDate();
      }
      APIS.Hyjj.objServiceCharge(data)
        .then((res) => {
          res.data.map((item, index) => {
            max += item.payprice;
          });
          res.data.map((item, index) => {
            // let zb = ((item.payprice / max) * 100).toFixed(2);
            let zb = this.returnFloat((item.payprice / max) * 100);
            arr.push({
              name: item.objName,
              value: this.returnFloat(item.payprice / 10000),
              zb: zb,
            });
          });
          if (rendernum == 2) {
            let textstyle8 = {};
            if (window.devicePixelRatio == 1.5) {
              textstyle8 = {
                color: "#192C55", // 改变标示文字的颜色
                align: "right",
                fontSize: 10,
              };
            } else if (window.devicePixelRatio == 1.25) {
              textstyle8 = {
                color: "#192C55", // 改变标示文字的颜色
                align: "right",
                fontSize: 12,
              };
            } else {
              textstyle8 = {
                color: "#192C55", // 改变标示文字的颜色
                align: "right",
                fontSize: 13,
              };
            }
            let myChart = echarts.init(
              document.getElementById("hyjjleftglxgysfwftj")
            );
            myChart.setOption({
              tooltip: {
                trigger: "item",
                formatter: function (params) {
                  return `${params.marker}  ${params.name}:${params.value}万元  占比:${params.percent}%`;
                  // return `${JSON.stringify(params) } `
                },
              },
              series: [
                {},
                {
                  label: {
                    normal: {
                      textStyle: textstyle8,
                      formatter: function (params) {
                        let target;
                        let zb1;
                        for (let i = 0; i < arr.length; i++) {
                          if (arr[i].name === params.name) {
                            target = arr[i].value;
                            zb1 = arr[i].zb;
                          }
                        }
                        return `${params.name} \n 占比:${zb1}%`;
                      },
                    },
                  },
                  data: arr,
                },
              ],
            });
          } else {
            this.renderhyjjglxgysfwftjoptions(arr);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    renderhyjjglxgysfwftjoptions(dataarr) {
      let textstyle8 = {};
      if (window.devicePixelRatio == 1.5) {
        textstyle8 = {
          color: "#192C55", // 改变标示文字的颜色
          align: "right",
          fontSize: 10,
        };
      } else if (window.devicePixelRatio == 1.25) {
        textstyle8 = {
          color: "#192C55", // 改变标示文字的颜色
          align: "right",
          fontSize: 12,
        };
      } else {
        textstyle8 = {
          color: "#192C55", // 改变标示文字的颜色
          align: "right",
          fontSize: 13,
        };
      }

      this.hyjjglxgysfwftjoptions = {
        tooltip: {
          trigger: "item",
          position: "right",
          formatter: function (params) {
            return `${params.marker}  ${params.name}:${params.value}万元  占比:${params.percent}%`;
            // return `${JSON.stringify(params) } `
          },
        },
        series: [
          {
            type: "pie",
            radius: ["0%", "54%"],
            center: ["center", "center"],
            hoverAnimation: false,
            z: 999,
            labelLine: {
              normal: {
                show: false,
                length: 5,
                length2: 5,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#edf1f9",
                    // color: 'red'
                  },
                },
                tooltip: {
                  show: false,
                },
              },
            ],
          },
          {
            name: "采购类型分析",
            type: "pie",
            radius: ["45%", "75%"],
            center: ["center", "center"],
            // roseType: 'area',
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    "#c136fe",
                    "#6236fe",
                    "#4381f9",
                    "#75a8f2",
                    "#fdb57a",
                    "#41d6b7",
                    "#009245",
                    "#0f69f7",
                    "#c136fe",
                    "#6236fe",
                    "#4381f9",
                    "#75a8f2",
                    "#fdb57a",
                    "#41d6b7",
                    "#009245",
                    "#0f69f7",
                  ];
                  return colorList[colors.dataIndex];
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 12,
                length2: 25,
                lineStyle: {
                  type: "dashed",
                },
              },
            },
            label: {
              normal: {
                textStyle: textstyle8,
                formatter: function (params) {
                  let target;
                  let zb1;
                  for (let i = 0; i < dataarr.length; i++) {
                    if (dataarr[i].name === params.name) {
                      target = dataarr[i].value;
                      zb1 = dataarr[i].zb;
                    }
                  }
                  return `${params.name} \n 占比:${zb1}%`;
                },
              },
            },
            data: dataarr,
            startAngle: 20, //起始角度
          },
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.echartab.resize();
      });
    },
    getfindByOrgCode() {
      let data = {};
      let xdata = [],
        ydata = [];
      if (
        this.fwftjtoptenselectvalue != "9" &&
        this.fwftjtoptenselectvalue != "全部"
      ) {
        data["orgCode"] = this.fwftjtoptenselectvalue;
      }
      if (this.myzbjedatepicker) {
        data["year"] = this.myzbjedatepicker;
      }
      APIS.Hyjj.findByOrgCode(data)
        .then((res) => {
          res.data.map((item) => {
            xdata.push(item.supplierName);
            // ydata.push((item.payPrice / 10000).toFixed(2));
            ydata.push(this.returnFloat(item.payPrice / 10000));
          });
          this.renderhyjjfwftjoptions(xdata, ydata);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    renderhyjjfwftjoptions(xdata, arr1) {
      this.hyjjfwftjoptions = {
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          formatter(params) {
            for (let x in params) {
              return (
                params[x].marker +
                params[x].name +
                ":          " +
                params[x].data +
                "万元"
              );
            }
          },
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            // interval: 0,
            // rotate: -30,
            // margin: 30,
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 5; // 一行显示几个字 然后就超过字数就会自动换行
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
            textStyle: {
              // fontSize: 8,
              align: "center",
              color: "#333333",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "服务费统计",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "#0f69f7",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "black",
                    fontSize: 12,
                  },
                },
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                // 下面是设置阴影宽度的属性
                shadowStyle: {
                  width: 5,
                },
              },
            },
            data: arr1,
          },
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.echartz.resize();
      });
    },
    renderhyjjvipndfyhzoptions(xValue, yValue1, yValue2, yValue3) {
      this.hyjjvipndfyhzoptions = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = params[0].name + "<br>";
            for (let i = 0; i < params.length; i++) {
              if (params[i].value) {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>';
                html +=
                  params[i].seriesName +
                  ":" +
                  params[i].value +
                  "万元" +
                  "<br>";
              }
            }
            return html;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          orient: "vertical",
          top: "20%",
          right: "0%",
          itemGap: 20,
          itemWidth: 14, // 设置图例图形的宽
          itemHeight: 14,
        },

        xAxis: [
          {
            type: "category",
            data: xValue,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总金额",
            type: "bar",
            barGap: "-20%",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#192c54",
              },
            },
            data: yValue1,
          },
          {
            name: "会员费",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#0da9df",
              },
            },
            data: yValue2,
          },
          {
            name: "服务费",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#fec103",
              },
            },
            data: yValue3,
          },
        ],
      };
    },
    renderselect() {
      this.fwftjtoptenoptions = this.$store.state.unitlistwqxarr.filter(
        (item) =>
          item.title != "外部客户" && item.title != "杭州金顺建设有限公司"
      );
    },
  },
};
</script>

<style scoped lang="scss">
.huiyuanjingji {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  // overflow: hidden;
  font-size: 1rem;

  .samlldiv {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .viptopleft {
      height: 80%;
      background-color: #182c56;
      width: 44%;
      border-radius: 5rem;
      position: absolute;
      top: 15%;
      left: 0;
      z-index: 2;
      box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .vipgridhrright {
        height: 1px;
        background: #182c56;
      }
      .vipgridhr {
        height: 1px;
        background: #dfe7f4;
      }
    }

    .viptopleft > div {
      text-align: center;
      color: #dfe7f4;
      margin-top: 1%;
    }

    .viptopright {
      height: 80%;
      border: 1px solid;
      background-color: #dfe7f4;
      width: 66%;
      border-radius: 80px;
      position: absolute;
      top: 15%;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-left: 10%;
      box-sizing: border-box;
    }

    .viptopright > div {
      text-align: center;
      color: #182c56;
      margin-top: 1%;
    }
    .vipmiddlearea {
      display: grid;
      grid-template-columns: 78% 22%;
      height: 35%;
    }

    .vipareaservefirst {
      border-top: 2px solid;
      background-color: #dfe7f4;
    }

    .vipareaservesecond {
      border-bottom: 2px solid;
      border-top: 1px solid;
      background-color: #dfe7f4;
    }

    .vippersonservesecond {
      border-bottom: 2px solid;
      background-color: #dfe7f4;
    }

    .normaltr {
      border-bottom: 1px solid black;
      color: #0000ff;
    }
    .hyjjtabletext {
      background-color: #dfe7f4;
      color: #0000ff;
    }
    .hyjjtabletextcolor {
      color: #0000ff;
    }
  }
  .hyjjdowmdiv1 {
    width: 101%;
    margin: 0 auto;
    height: 47%;
    position: relative;
    box-sizing: border-box;
    background-image: url("../assets/hyjjtopbg.png");
    background-size: 101% 100%;
    background-repeat: no-repeat;
    /* border: 1px solid #b8c0d0;
    box-shadow: rgba(169, 183, 201,.3) -1px 1px 4px 5px;   */
    padding: 2%;
    margin-left: -1%;
  }
  .fuftjtopten {
    height: 84%;
    width: 100%;
    position: relative;
  }
  .fuftjtoptendw {
    position: absolute;
    bottom: 10%;
    left: 2%;
    font-size: 0.6rem;
  }
  .glxgysfwftj {
    height: 49%;
    display: flex;
    justify-content: space-between;
    .glxgysfwftjtitle {
      width: 37%;
      height: 100%;
      padding: 1%;
      box-sizing: border-box;
      .glxgysfwftjcontenttext {
        flex: 1;
        position: relative;
        width: 100%;
        height: 90%;
        .glxgysfwftjcontenttextsmalldiv {
          width: 25%;
          height: 26%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 13;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .fwfyphtopten {
    width: 60%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .fwfyphtoptencontent {
      display: flex;
      height: 90%;
      justify-content: space-between;
      .fwfyphtoptencontenttable {
        width: 48%;
        height: 100%;
        padding-top: 3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .table1 {
          border-collapse: collapse;
          height: 100%;
          text-align: center;
          width: 100%;
          border-bottom: 2px solid #182c56;
          #qianwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
          #houwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
        }
      }
    }
  }
}
.bottonshuzipopupdown {
  height: 1.2rem;
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}
.bottonshuzipopuptop {
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  z-index: 2147483647 !important;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

.mainbigtopdiv2 {
  width: 99%;
  height: 20%;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 0.05rem solid #192c55;
  border-radius: 0.25rem;
  margin-top: 3%;
}
#vipareabottomechartsdiv {
  width: 100%;
  height: 100%;
  padding-top: 2%;
  box-sizing: border-box;
}
.bottomyincangtitle {
  background-color: #e4eef9;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 2%;
}
.middletable {
  width: 60%;
  height: 100%;
  background-color: #e4eef9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

::v-deep .myselectimghyjj {
  width: 7rem;
  margin-left: 0.5rem;
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url("@/assets/yellowdownsanjiao.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    margin-left: calc(100% - 0.9rem);
    transform: translate(-50%, -53%);
  }
  .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 0.6rem);
  }
  .el-select .el-input .el-select__caret {
    color: #192c55;
  }
  .el-icon-arrow-up:before {
    content: "";
  }

  /* width: 7.3rem;
  height: 1.3rem;
  margin-left: 0.5rem;
  border: 0.05rem solid #192c55;
  border-radius: 1.1rem;
  .el-select{
    height:1.5rem;
    width: 100%;
  }
  .el-input__inner {
    font-family: JCYT;
    font-size: 0.8rem;
    border: none;
    background-color: transparent;
    height:1.5rem;
    width:100%;
    padding-left: 5%;
  }
  .el-input__icon {
    line-height: 0;
  }
  .el-input__suffix {
    right: 14%;
  }

  .el-input__prefix {
    width: 1.3rem;
    height:1.3rem;
    content: '';
    background: url(../yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 5.8rem;;
  }
  .el-icon-arrow-up:before {
    content: '';
  } */
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
    height: 1.2rem;
  }
  .el-input__inner::placeholder {
    color: #606266;
  }
}

::v-deep .style13 {
  height: 1.4rem;
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // margin-top: 0.03rem;
    margin-left: calc(100% - 1.5rem);
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
    height: 1.2rem;
  }
  .el-input__inner::placeholder {
    color: #606266;
  }
}
</style>
